<template>
	<view>
		<view class="header">
			<view class="fill-height el-flex">
				<view class="header-btn2 el-flex">
					<image src="../../static/images/user.png"></image>
				</view>
				<view class="placeholder">
					<view class="tab">
						<view class="tab-item" @click="changeTab(index)" :class="{active:index==tabIndex}"
							v-for="(item,index) in tabs" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="share-btn">
					<view class="app-header-item">
						<view class="ipt-img-box el-flex">
							<image src="../../static/images/small_bell.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="app-view-wrapper">
			<template v-if="tabIndex==1">
				<discoverRe :commendAfter='commendAfter'></discoverRe>
			</template>
		</view>
	</view>

</template>
<script>
	import discoverRe from '../../components/discoverPage/discoverRe/discoverRe.vue'
	export default {
		components: {
			discoverRe
		},
		onReachBottom() {
			if (this.commendAfter == '') this.commendAfter = 0;
			this.commendAfter++
		},
		data() {
			return {
				tabIndex: 1,
				commendAfter:'',
				tabs: [{
						name: "关注",
						id: "attention",
					}, {
						name: "推荐",
						id: "recommend",
					}, {
						"id": "36583933",
						"name": "雷军年度演讲",
					},
					{
						"id": "35637112",
						"name": "小米发布"
					}
				],
			}
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index
			}
		}

	}
</script>
<style lang="scss" scoped>
	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		width: 7.2rem;
		max-width: 720px !important;
		min-width: 350px !important;
		margin: 0 auto;
		background: #FFF;

		line-height: 1.15;

		view {
			line-height: 1.15;
		}

		.fill-height {
			height: 0.84rem;
			display: flex;
			align-items: center;
			flex: 1 1 auto;
			flex-wrap: nowrap;

			.header-btn2 {
				width: 0.78rem;
				height: 0.78rem;
				position: relative;

				image {
					width: 0.52rem;
					height: 0.52rem;
					border-radius: 0.52rem
				}
			}

			.share-btn {
				display: flex;
				align-items: center;

				.app-header-item {
					display: block;

					.ipt-img-box {
						width: 0.78rem;
						height: 0.78rem;

						image {
							width: 0.78rem;
							height: 0.78rem;
						}
					}
				}

			}

			.placeholder {
				flex: 1;
				text-align: center;
				font-size: .3rem;
				overflow: auto;

				.tab {
					width: 100%;
					display: flex;
					overflow-x: auto;
					--webkit-overflow-scrolling: touch;

					.tab-item {
						padding: 0 0.32rem;
						font-size: .32rem;
						font-weight: 700;
						line-height: .78rem;
						color: #999;
						white-space: nowrap;
						flex-shrink: 0;
					}

					.active {
						color: #333;
						position: relative;
					}
				}
			}
		}

		.nav-wrap {
			position: relative;
			overflow: hidden;
			line-height: 1.15;
			z-index: 99;

			view {
				line-height: 1.15;
			}

			.nav {
				overflow-x: auto;
				background: #f2f2f2;
				font-size: .26rem;
				white-space: nowrap;

				.nav-item {
					display: inline-block;
					padding: 0 0.25rem;

					text {
						font-size: .26rem;
						display: inline-block;
						line-height: .55rem;
						border-bottom: 2px solid rgba(237, 91, 0, 0);
					}
				}

				.active {
					text {
						color: rgb(237, 91, 0);
						border-color: rgb(237, 91, 0);
					}

				}
			}
		}
	}

	.app-view-wrapper {
		margin-top: 0.84rem;
	}
</style>